<template>
	<div style="margin-top: 80px">
		<h2 id="h2login">软件注册</h2>
		<form action="#" method="post">
			<input type="text" name="name" v-model="uqkey" class="name" placeholder="序列号" required="true" />
			<input type="text" name="password" v-model="valCode" class="password" placeholder="激活码" required="true" />
			<div class="clear"></div>
			<input type="button" value="注册" @click="onReg" />
		</form>
	</div>
</template>
<script lang="ts">
import { mapState } from 'vuex'; 
import { useStore } from '/@/store/index';
import { ElMessage  } from 'element-plus';
import { toRefs, reactive, defineComponent  } from 'vue';
import { submitReg } from '/@/api/common/index';
export default defineComponent({
	setup() {
		const store = useStore();
		const state = reactive({
			valCode:""
		}); 
		const onReg = function(){
			if(store.state.reginfo.reginfo.uqkey.length == 0){
				ElMessage.error(`序列号不能为空`);
				return;
			}else if(state.valCode.length == 0){
				ElMessage.error(`激活码不能为空`);
				return;
			}
			submitReg({rval:state.valCode}).then((res:any) => {
				if(res&&res.success){
					store.dispatch('reginfo/setRegInfo', {isReg:true});
					//this.$emit('regSucc');
				}else{
					ElMessage.error(res.msg);
				}
			});
		}
		return {
			onReg,
			...toRefs(state),
		};
	},
	computed:mapState({
		//是否已注册
		uqkey:function(state:any){return state.reginfo.reginfo.uqkey;}
	})
});
</script>

<style lang="scss" scoped>
h1 {
	font-size: 40px;
	color: #fff;
	margin: 50px 0px 80px 0px;
	text-align: center;
}

#h2login {
	font-size: 25px;
	color: #ffffff;
	margin-bottom: 20px;
}

input[type='text'],
input[type='password'] {
	width: 93.5%;
	padding: 15px;
	border: 1px solid #7d7d7d;
	outline: none;
	font-size: 14px;
	margin-bottom: 20px;
	border-radius: 25px;
}
form ul {
	float: left;
}
ul li {
	list-style: none;
	display: inline-block;
}
ul li input[type='checkbox'] {
	vertical-align: middle;
}
ul li input[type='checkbox'] + label {
	position: relative;
	padding-left: 5px;
	border: #f0f8ff;
	color: #ffffff;
	display: inline-block;
	font-size: 14px;
	vertical-align: middle;
}

form a {
	color: #ffffff;
	float: right;
	font-size: 14px;
}
input[type='button'] {
	background: #faebd7;
	padding: 13px 0;
	font-size: 16px;
	color: black;
	cursor: pointer;
	outline: none;
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-o-transition: 0.5s all;
	-ms-transition: 0.5s all;
	width: 100%;
	border: 1px solid black;
	margin-top: 25px;
	border-radius: 25px;
}

input[type='button']:hover {
	background: #081148;
	color: #ffffff;
}
.footer-w3l {
	margin: 120px 0 15px 0;
}
.footer-w3l p {
	font-size: 14px;
	text-align: center;
	color: #fff;
	line-height: 27px;
}
.footer-w3l p a {
	color: #fff;
}
.footer-w3l p a:hover {
	text-decoration: underline;
}

/*--pop-up--*/
a.book.popup-with-zoom-anim.button-isi.zoomIn.animated {
	border: 1px solid #fff;
	padding: 8px 34px;
	color: #fff;
	display: inline-block;
	margin-top: 35px;
	border-radius: 20px;
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-o-transition: 0.5s all;
	-ms-transition: 0.5s all;
	outline: none;
}
a.book.popup-with-zoom-anim.button-isi.zoomIn.animated:hover {
	border: 1px solid #0c1558;
	color: #fff;
	background: #0c1558;
}
.book-form {
	padding: 2em;
}
.book-form h3 {
	font-size: 1.8em;
	text-align: left;
	color: #7d7d7d;
	margin-bottom: 1.5em;
}
/*-- //pop-up --*/

/*-- Responsive --*/
@media screen and (max-width: 1440px) {
	.signin-agile,
	.signup-agileinfo {
		padding: 73px;
	}
	input[type='text'],
	input[type='password'] {
		width: 91%;
	}
}
@media screen and (max-width: 1366px) {
	.signin-agile,
	.signup-agileinfo {
		padding: 70px;
	}
	input[type='text'],
	input[type='password'] {
		width: 90.5%;
	}
}
@media screen and (max-width: 1280px) {
	.w3layouts {
		width: 75%;
		margin: 0 auto;
	}
}
@media screen and (max-width: 1080px) {
	.w3layouts {
		width: 80%;
		margin: 0 auto;
	}
	.signin-agile,
	.signup-agileinfo {
		padding: 63px;
	}
}
@media screen and (max-width: 1024px) {
	h1 {
		margin: 50px 0px 56px 0px;
	}
	.signin-agile,
	.signup-agileinfo {
		padding: 60px;
	}
	input[type='text'],
	input[type='password'] {
		width: 89%;
	}
	.footer-w3l {
		margin: 80px 0 15px 0;
	}
}
@media screen and (max-width: 991px) {
	.w3layouts {
		width: 85%;
		margin: 0 auto;
	}
}
@media screen and (max-width: 966px) {
}
@media screen and (max-width: 900px) {
	.signin-agile,
	.signup-agileinfo {
		padding: 55px;
	}
	input[type='text'],
	input[type='password'] {
		width: 88%;
	}
}
@media screen and (max-width: 800px) {
	.signin-agile,
	.signup-agileinfo {
		padding: 49px;
	}
	input[type='text'],
	input[type='password'] {
		width: 87%;
	}
}
@media screen and (max-width: 768px) {
	.w3layouts {
		width: 90%;
		margin: 0 auto;
	}
	.signin-agile,
	.signup-agileinfo {
		padding: 50px;
	}
	ul li input[type='checkbox'] + label {
		font-size: 13px;
	}
	form a {
		font-size: 13px;
	}
}
@media screen and (max-width: 736px) {
	.signin-agile,
	.signup-agileinfo {
		padding: 48px;
	}
}
@media screen and (max-width: 667px) {
	h1 {
		margin: 30px 0px 45px 0px;
	}
	.w3layouts {
		width: 95%;
		margin: 0 auto;
	}
	.signin-agile,
	.signup-agileinfo {
		padding: 46px;
	}
	input[type='text'],
	input[type='password'] {
		padding: 12px;
	}
	input[type='submit'] {
		padding: 12px 0;
	}
	.my-mfp-zoom-in.mfp-ready #small-dialog {
		padding: 30px !important;
	}
}
@media screen and (max-width: 640px) {
	.signin-agile,
	.signup-agileinfo {
		padding: 44px;
	}
	.signup-agileinfo p {
		font-size: 13.5px;
		line-height: 27px;
	}
}
@media screen and (max-width: 600px) {
	.w3layouts {
		width: 85%;
		margin: 0 auto;
	}
	.signin-agile,
	.signup-agileinfo {
		width: 82%;
	}
	input[type='text'],
	input[type='password'] {
		width: 93%;
	}
}
@media screen and (max-width: 568px) {
	h1 {
		font-size: 35px;
		margin: 35px 0px 50px 0px;
	}
	.footer-w3l {
		margin: 40px 0 15px 0;
	}
}
@media screen and (max-width: 480px) {
	.signin-agile,
	.signup-agileinfo {
		width: 77%;
	}
	input[type='text'],
	input[type='password'] {
		width: 92%;
	}
	.footer-w3l p {
		font-size: 13px;
	}
}
@media screen and (max-width: 414px) {
	h1 {
		font-size: 28px;
		margin: 35px 0px 40px 0px;
	}
	.signin-agile,
	.signup-agileinfo {
		width: 74%;
	}
	input[type='text'],
	input[type='password'] {
		width: 89%;
	}
	form a {
		margin-top: 3px;
	}
	.signup-agileinfo {
		height: 240px;
	}
}
@media screen and (max-width: 384px) {
	h1 {
		font-size: 30px;
		margin: 35px 0px 40px 0px;
	}
	.signin-agile,
	.signup-agileinfo {
		width: 77%;
		padding: 35px;
	}
	a.book.popup-with-zoom-anim.button-isi.zoomIn.animated {
		padding: 5px 25px;
		font-size: 13px;
		margin-top: 25px;
	}
}
@media screen and (max-width: 375px) {
	.signin-agile,
	.signup-agileinfo {
		width: 80%;
		padding: 30px;
	}
	.book-form h3 {
		font-size: 1.5em;
	}
}
@media screen and (max-width: 320px) {
	h1 {
		font-size: 27px;
		margin: 35px 0px 30px 0px;
	}
	.signin-agile,
	.signup-agileinfo {
		width: 84%;
		padding: 20px;
	}
	.signin-agile h2,
	.signup-agileinfo h3 {
		font-size: 20px;
	}
	input[type='text'],
	input[type='password'] {
		padding: 10px;
	}
	input[type='submit'] {
		padding: 10px 0px;
	}
	ul li input[type='checkbox'] + label span:first-child {
		width: 10px;
		height: 10px;
		top: 3px;
	}
	ul li input[type='checkbox'] + label {
		font-size: 12px;
		padding-left: 20px;
	}
	form a {
		font-size: 12px;
		margin-top: 4px;
	}
	a.book.popup-with-zoom-anim.button-isi.zoomIn.animated {
		margin-top: 30px;
	}
	.signup-agileinfo p {
		font-size: 12.5px;
	}
}
</style>
